<template>
  <div class="statusAttribute">
    <title-middle title="状态分布"></title-middle>
    <div class="bottom">
      <div class="liquidEchart" ref="liquidEchart"></div>
    </div>
  </div>
</template>
<script setup>
import { ref, inject, onMounted } from 'vue'
const echarts = inject('echarts')
let liquidEchart = ref(null)
let myEchart = null
let value = 0.28
let value1 = 0.18
let data = [0.28, 0.18]
onMounted(() => {
  setEcharts()
})
const setEcharts = () => {
  if (myEchart != null && myEchart != '' && myEchart != undefined) {
    myEchart.dispose() //销毁
  }
  myEchart = echarts.init(liquidEchart.value, null, { renderer: 'svg' })
  let option = {
    title: [
      {
        text: '在职',
        x: '17%',
        y: '70%',
        textStyle: {
          fontSize: 26,
          fontWeight: '100',
          color: '#fff',
          lineHeight: 16,
          textAlign: 'center'
        }
      },
      {
        text: '退休',
        x: '73%',
        y: '70%',
        textStyle: {
          fontSize: 26,
          fontWeight: '100',
          color: '#fff',
          lineHeight: 16,
          textAlign: 'center'
        }
      }
    ],
    series: [
      {
        type: 'liquidFill',
        radius: '40%',
        center: ['25%', '45%'],
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#05fbf6'
              },
              {
                offset: 1,
                color: '#3ed2fd'
              }
            ],
            globalCoord: false
          }
        ],
        data: [data[0], data[0]], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: 'none'
        },
        label: {
          fontSize: 27,
          color: '#fff'
        },
        outline: {
          // show: false
          borderDistance: 0,
          itemStyle: {
            borderWidth: 2,
            borderColor: 'RGBA(255, 255, 255, 0.3)'
          }
        }
      },

      {
        //第二个球的填充
        type: 'liquidFill',
        radius: '40%',
        center: ['80%', '45%'],
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#0ac7bc'
              },
              {
                offset: 1,
                color: '#07be82'
              }
            ],
            globalCoord: false
          }
        ],
        data: [data[1], data[1]], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: 'none'
        },
        label: {
          fontSize: 27,
          color: '#fff'
        },
        outline: {
          borderDistance: 0,
          itemStyle: {
            borderWidth: 2,
            borderColor: 'RGBA(255, 255, 255, 0.3)'
          }
        }
      }
    ]
  }
  myEchart.setOption(option)
}
</script>
<style scoped lang="scss">
.statusAttribute {
  .bottom {
    position: relative;
  }
  .liquidEchart {
    width: 370px;
    height: 400px;
    // background-color: red;
  }
}
</style>
